<template>
  <div class="FromGood">
    <el-form
      :model="from"
      :rules="ruleGood"
      ref="from"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="门店名称" prop="name">
        <el-col :span="5">
          <el-input
            v-model="from.storeName"
            placeholder="请输入"
            size="medium"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="门店图片" prop="storeImage">
        <el-upload
          :action="baseurl + '/upload'"
          list-type="picture-card"
          multiple
          :limit="1"
          :on-preview="avhandlePictureCardPreview"
          :on-remove="avhandleRemove"
          :on-success="avuploadSuccess"
          :file-list="avfileList"
          :on-exceed="avmessage"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="from.storeImage" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item v-show="false" label="门店图片" prop="name">
        <el-col :span="5">
          <el-input v-model="from.storeImage" placeholder="请输入"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="门店电话" prop="name">
        <el-col :span="5">
          <el-input v-model="from.storePhone" placeholder="请输入"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="门店地址" prop="name">
        <el-col :span="5">
          <el-input v-model="from.storeAddress" placeholder="请输入"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="经度" prop="name">
        <el-col :span="5">
          <el-input v-model="from.storeLng" placeholder="请输入"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="维度" prop="name">
        <el-col :span="5">
          <el-input v-model="from.storeLat" placeholder="请输入"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="营业时间" prop="name">
        <el-col :span="5">
          <el-input v-model="from.busineHours" placeholder="请输入"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="是否支持预约" prop="name">
        <el-col :span="5">
          <el-select v-model="from.supportOrder" placeholder="请选择状态">
            <el-option label="支持" :value="true"></el-option>
            <el-option label="不支持" :value="false"></el-option>
          </el-select>
        </el-col>
      </el-form-item>

      <el-form-item label="门店描述" prop="name">
        <el-col :span="5">
          <el-input
            type="textarea"
            v-model="from.storeDescription"
            placeholder="请输入"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="门店状态" prop="storeId">
        <el-select v-model="from.storeStatus" placeholder="请选择门店">
          <el-option label="未打烊" :value="0"></el-option>
          <el-option label="打烊" :value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" :loading="loading" @click="submitForm('from')"
          >立即修改</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    let letterRule = (rule, value, callback) => {
      let reg = /^[a-zA-Z0-9_-]{4,18}$/;
      if (value === "") {
        callback(new Error("输入内容不能为空"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入字母、数字、下划线"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      from: {},
      ruleGood: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
          { validator: letterRule, trigger: "blur" },
        ],
      },
      store: [],
      dialogVisible: false,
      avfileList: [],
    };
  },
  mounted() {
    this.getStores();
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid);
        if (valid) {
          this.loading = true;
          this.adduser();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async adduser() {
      let msg;
      if (this.from.storePhone === "") {
        msg = "电话不能为空";
        this.eui.Message({
          message: msg,
          type: "error",
          duration: 5 * 1000,
        });
        this.loading = false;
        return false;
      } else {
        let type = "success",
          rmsg;
        let res = await this.http.post("/store/updateStore", this.from);
        if (!res.error) {
          (type = "success"), (rmsg = "修改成功");
        } else {
          (type = "error"), (rmsg = "修改失败");
        }
        this.eui.Message({
          message: rmsg,
          type: type,
          duration: 5 * 1000,
        });
        this.loading = false;
      }
    },
    async getStores() {
      let res = await this.http.get("/store/getStoreId");
      this.from = res.error ? {} : res.result;
      this.avfileList = res.result.storeImage
        ? [{ url: res.result.storeImage }]
        : [];
      console.log(this.store);
    },
    avhandleRemove(file, fileList) {
      this.from.storeImage = "";
    },
    avhandlePictureCardPreview(file) {
      this.dialogVisible = true;
    },
    avuploadSuccess(response, file, fileList) {
      this.from.storeImage = response.result[0];
    },
    avdealFileList(fileList) {},
    avmessage(msg, type) {
      this.eui.Message({
        message: "超出上传个数",
        type: "error",
      });
    },
  },
};
</script>

<style scoped>
.FromGood {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  box-sizing: border-box;
}
</style>